<template>
  <div class="page-goods">
    <nav-bar title="商品"></nav-bar>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in goodsData.gallery" :key="item.id">
        <img class="swipe-img" :src="item.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>

    <common-tips></common-tips>

    <div class="name-holder" v-if="isShow">
      <p class="name">{{ goodsData.info.name }}</p>
      <p class="desc">{{ goodsData.info.goods_brief }}</p>
      <p class="price">￥{{ goodsData.info.retail_price }}</p>
      <p class="brand"></p>
    </div>

    <div class="count-choice" @click="popUp">
      <div>请选择规格数量</div>
      <div class="icon"></div>
    </div>

    <div class="params-holder">
      <p class="title">商品参数</p>
      <p
        class="params"
        v-for="(item, index) in goodsData.attribute"
        :key="index"
      >
        <span>{{ item.name }}：</span>{{ item.value }}
      </p>
    </div>

    <div
      class="goods-desc"
      v-if="isShow"
      v-html="goodsData.info.goods_desc"
    ></div>

    <div class="question-holder">
      <div class="title"><span>——</span> 常见问题 <span>——</span></div>
      <ul>
        <li class="question" v-for="item in goodsData.issue" :key="item.id">
          <div class="question-box">
            <div class="spot"></div>
            <div class="question-text">{{item.question}}</div>
          </div>
          <div class="answer">{{item.answer}}</div>
        </li>
      </ul>
    </div>
    

    <div class="list-holder">
      <p class="title">大家都在看</p>
      <ul class="list">
        <li
          class="item"
          v-for="item in goodsData.productList"
          :key="item.id"
          @click="toGoods(item.id)"
        >
          <img :src="item.list_pic_url" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="price">￥ {{ item.retail_price }}</p>
        </li>
        <li class="item"></li>
      </ul>
    </div>

    <div class="bottom-fixed">
      <div class="collect-box" @click="addCollect">
        <div
          :class="{ active: goodsData.collected }"
          class="collect-icon"
        ></div>
      </div>

      <div class="cart-box"  @click="goCart">
        <div class="cart-badge">
          <van-badge :content="goodsData.allnumber">
            <div class="cart-icon"></div>
          </van-badge>
        </div>
      </div>

      <div class="buy-now" @click="popUp">立即购买</div>
      <div class="add-cart" @click="addToCart">加入购物车</div>
    </div>

    <van-popup
      class="pop-up"
      v-model="popUpShow"
      position="bottom"
      closeable
      :style="{ height: '40%' }"
      v-if="isShow"
    >
      <div class="pop-info">
        <img :src="goodsData.info.primary_pic_url" alt="" />
        <div class="text-box">
          <p class="pop-price">价格 ￥{{ goodsData.info.retail_price }}</p>
          <p class="pop-text">请选择价格</p>
        </div>
      </div>
      <div class="pop-count">
        <p>数量：</p>
        <van-stepper v-model="goodsCount" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getGoodsInfo } from "@/api/pages/goods";
import { addGoodsToCollect } from "@/api/pages/collect";
import { addGoodsToCart } from "@/api/cart/cart";

import NavBar from "@/components/common/nav-bar";
import CommonTips from "@/components/common/common-tips";
export default {
  data() {
    return {
      id: this.$route.query.id,
      openId: localStorage.getItem("openId"),
      goodsData: {},
      isShow: false,
      popUpShow: false,
      goodsCount: 1,
    };
  },
  methods: {
    // 获取商品数据
    getData(id) {
      this.goodsData = {};
      getGoodsInfo({ openId: this.openId, id: id }).then((res) => {
        console.log(res);
        this.goodsData = res;
        this.isShow = true;
      });
    },
    //  新的商品界面
    toGoods(id) {
      this.isShow = false;
      this.getData(id);
    },

    // 展开弹出层
    popUp() {
      this.popUpShow = true;
    },

    // 添加收藏
    addCollect() {
      addGoodsToCollect({ goodsId: this.id, openId: this.openId }).then(
        (res) => {
          console.log(res);
          if (res.data == "success") {
            if (!this.goodsData.collected) {
              this.$toast.success("收藏成功");
              this.goodsData.collected = true;
            } else {
              this.$toast.success("取消收藏成功");
              this.goodsData.collected = false;
            }
          } else {
            this.$toast.fail("操作失败");
          }
        }
      );
    },

    // 添加到购物车
    addToCart() {
      addGoodsToCart({
        goodsId: this.id,
        openId: this.openId,
        number: this.goodsCount,
      }).then((res) => {
        if (res.data == "success") {
          this.$toast.success("添加成功");
          this.goodsData.allnumber += this.goodsCount;
        } else {
          this.$toast.fail("添加失败");
        }
      });
    },

    // 跳转到购物车
    goCart(){
      this.$router.push('/cart');
    }
  },
  created() {
    this.getData(this.id);
  },
  components: {
    "nav-bar": NavBar,
    "common-tips": CommonTips,
  },
};
</script>

<style lang="scss">
.page-goods {
  .swipe-img {
    width: 375px;
    height: 375px;
  }

  .name-holder {
    width: 100%;
    height: 153px;
    background-color: #fff;
    text-align: center;
    .name {
      padding-top: 10px;
      font-size: 20px;
    }
    .desc {
      margin-top: 30px;
      color: #999;
    }
    .price {
      margin-top: 10px;
      font-size: 16px;
      color: #b4282d;
    }
  }

  .count-choice {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    height: 50px;
    border-top: 1px solid #eee;
    background-color: #fff;
    line-height: 25px;
    .icon {
      width: 25px;
      height: 25px;
      background: url("../../../assets/images/go.png") no-repeat center;
    }
  }

  .params-holder {
    margin-top: 10px;
    padding: 10px 15px;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    .title {
      padding: 10px 0;
      font-size: 20px;
    }
    .params {
      margin: 10px 0;
      padding: 10px 0;
      background-color: #f7f7f7;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      span {
        width: 67px;
        color: #999;
        display: inline-block;
      }
    }
  }

  .goods-desc {
    img {
      display: block;
      height: 100%;
      width: 100%;
    }
  }

  .question-holder {
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #fff;
    .title {
      padding: 10px 0;
      text-align: center;
      span {
        color: #ccc;
      }
    }
    .question {
      padding: 10px 10px;
      box-sizing: border-box;
      .question-box {
        position: relative;
        .spot {
          position: absolute;
          left: -5px;
          top: 49%;
          height: 2px;
          width: 2px;
          border-radius: 50%;
          background-color: #b4282d;
        }
        .question-text {
          margin-top: 10px;
        }
      }
      .answer {
        margin-top: 10px;
        width: 100%;
        height: 100%;
        font-size: 12px;
        color: #787878;
        overflow: hidden;
      }
    }
  }

  .list-holder {
    margin-top: 30px;
    .title {
      text-align: center;
      padding: 12px 0;
      background-color: #fff;
    }

    .list {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      .item {
        margin: auto;
        margin-bottom: 5px;
        width: 48%;
        height: 210px;
        background-color: #fff;
        .name {
          margin-left: 10px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .price {
          margin-left: 10px;
          margin-top: 16px;
          color: #9c3232;
        }
        img {
          display: block;
          margin: 0 auto;
          width: 150px;
          height: 150px;
        }
        .last-title {
          margin-top: 40px;
          font-size: 16px;
          text-align: center;
        }
        .last-img {
          margin-top: 40px;
          width: 35px;
          height: 35px;
        }
      }
      .item:nth-last-child(1) {
        height: 0;
      }
    }
  }

  .bottom-fixed {
    display: flex;
    z-index: 9999;
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 52px;
    width: 100%;
    background-color: #fff;
    .collect-box {
      display: flex;
      width: 84px;
      height: 100%;
      border: 1px solid #f4f4f4;
      .collect-icon {
        margin: auto;
        width: 23px;
        height: 23px;
        background: url("../../../assets/images/icon_collect.png") no-repeat
          center;
        background-size: contain;
      }
      .collect-icon.active {
        background: url("../../../assets/images/icon_collect_checked.png")
          no-repeat center;
        background-size: contain;
      }
    }

    .cart-box {
      display: flex;
      width: 84px;
      height: 100%;
      border: 1px solid #f4f4f4;
      .cart-badge {
        margin: auto;
        width: fit-content;
        height: fit-content;
        .cart-icon {
          margin: auto;
          width: 23px;
          height: 23px;
          background: url("../../../assets/images/ic_menu_shoping_nor.png")
            no-repeat center;
          background-size: contain;
        }
      }
    }

    .buy-now,
    .add-cart {
      width: 104px;
      height: 100%;
      line-height: 52px;
      text-align: center;
    }

    .buy-now {
      border: 1px solid #f4f4f4;
    }

    .add-cart {
      color: #fff;
      background-color: #b4282d;
      border: 1px solid #b4282d;
    }
  }

  .pop-up {
    box-sizing: border-box;
    padding: 15px;
    .pop-info {
      overflow: hidden;
      img {
        display: block;
        width: 88px;
        height: 88px;
        float: left;
      }
      .text-box {
        float: left;
        margin-left: 16px;
        .pop-price {
          margin: 16px 0;
          color: #b4282d;
        }
      }
    }

    .pop-count {
      width: 100%;
      margin-top: 20px;
      p {
        margin-bottom: 10px;
      }
    }
  }
}
</style>